<template>
  <!-- 声之剧场 -->
  <div>
    <ul>
      <li v-for="item in datalist.slice(5,10)" :key="item.index">
        <img :src="item.picUrl" alt="">
        <div class="box">
          <p class="s1 fff tac">{{item.name}}</p>
        </div>
        <a href="#" class="s1 black">{{item.rcmdtext}}</a>
      </li>
    </ul>
  </div>
</template>
<style scoped>
ul {
  width: 970px;
  height: 220px;
  display: flex;
  flex-wrap: wrap;
}
ul > li {
  margin: 10px;
  list-style: none;
  width: 170px;
  height: 140px;
  border-radius: 10px;
}
ul li img {
  width: 100%;
}
.box {
  position: relative;
  top: -23px;
  background-color: rgba(0, 0, 0, 0.3);
}
.s1 {
  font-size: 1px;
}
.tac {
  text-align: center;
}
.fff {
  color: #fff;
}
.black {
  color: gray;
}
a {
  position: relative;
  top: -20px;
  text-decoration: none;
}
a:hover {
  color: #000;
}
</style>
<script>
import axios from "axios";
import { API } from "../../../common/constant";
export default {
  data() {
    return {
      datalist: [],
    };
  },
  mounted() {
    axios.get(`${API}/dj/toplist/pay`).then((res) => {
      // console.log(res.data.data)
      this.datalist = this.datalist.concat(res.data.data.list);
    });
  },
};
</script>
